import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './Css/Account_management.css'
import { Input, Button, ConfigProvider, Space, DatePicker, Modal, Cascader, Form, InputNumber, Radio, Select, Switch, TreeSelect, } from 'antd';

// 调用定义接口
import { getuser, adduser, getcos } from '../../../../request/api'
const { RangePicker } = DatePicker;

export default function Title(props) {
    useEffect(() => {
        cosshange()
    },[])
    const Navigate = useNavigate()
    const { name, fct, getuserlist } = props;

    let [item, setitem] = useState('')//搜索框
    let [num, setnum] = useState(0)//当前检索到多少条数据
    const [modal2Open, setModal2Open] = useState(false); //控制模态框是否显示


    let [coslist, setcoslist] = useState([])//角色列表
    let [user, setuser] = useState([])//账号
    let [password, setpassword] = useState([])//密码
    let [phone, setphone] = useState([])//手机号
    let [cid, setcid] = useState([])//角色
    let [Real_name, setReal_name] = useState([])//姓名

    // 搜索
    const search = async () => {
        if (name === '创建账号') {
            let res = await getuser({ item: item })
            setnum(res.data.length)
            fct(res.data)
            setitem('')
        } else {
            let res = await getcos({ item: item })
            setnum(res.data.length)
            fct(res.data)
            setitem('')
        }

    }

    // 添加账号
    const add = async () => {
        let from = {
            user: user,
            password: password,
            phone: phone,
            cid: cid,
            Real_name: Real_name,
            static_time: new Date().toLocaleString()
        }
        let res = await adduser({ from: from })
        if (res.code == 200) {
            getuserlist(200)
            alert('添加成功')
            setModal2Open(false)
            setuser('')
            setpassword('')
            setphone('')
            setcid('')
            setReal_name('')
        }
    }

    // 角色回显
    const cosshange = async () => {
        let res = await getcos({})
        setcoslist(res.data)   
    }


    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };




    return (
        <div>
            <div className='xitong_Title'>
                <div className='xitong_Title_left'>
                    <Input size="large" placeholder="请输入内容" prefix='账号：' style={{ marginBottom: '20px' }} value={item} onChange={(event) => {
                        setitem(event.target.value)
                    }} />
                    <Button size="large" style={{ marginRight: '10PX' }} onClick={() => {
                        search()
                    }}>检索</Button>
                    <Button size="large" style={{ marginRight: '10PX' }} onClick={() => {
                        search()
                    }}>重置</Button>
                    <Button size="large" style={{ display: name == '操作日志' ? 'none' : 'inline-block' }} onClick={() => {
                        if (name === '创建账号') {
                            setModal2Open(true)
                        } else if (name === '新增角色') {
                            Navigate('/home/System/addcos')
                        }
                    }}>{name}</Button>
                </div>
                <div className='xitong_Title_time'>
                    <RangePicker showTime style={{ height: '40px', display: name == '操作日志' ? '' : 'none' }}></RangePicker>
                </div>
                <span className='xitong_user'>当前共检索到{num}条内容</span>
                <Modal
                    title={name}
                    centered
                    open={modal2Open}
                    onOk={() => add()}
                    onCancel={() => setModal2Open(false)}
                >
                    <Form
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        initialValues={{ size: componentSize }}
                        onValuesChange={onFormLayoutChange}
                        size={componentSize as SizeType}
                        style={{ maxWidth: 600 }}
                    >
                        {/* <Form.Item label="Form Size" name="size">
                            <Radio.Group>
                                <Radio.Button value="small">Small</Radio.Button>
                                <Radio.Button value="default">Default</Radio.Button>
                                <Radio.Button value="large">Large</Radio.Button>
                            </Radio.Group>
                        </Form.Item> */}
                        <Form.Item label="账号">
                            <Input value={user} onChange={(e) => {
                                setuser(e.target.value)
                            }} />
                        </Form.Item>
                        <Form.Item label="角色" >
                            <Select value={cid} onChange={(e) => {
                                setcid(e)
                            }}>
                                {coslist.map((item) => {
                                    return <Select.Option key={item._id} value={item._id}>{item.identity_name}</Select.Option>
                                })
                                }

                            </Select>
                        </Form.Item>
                        <Form.Item label="姓名">
                            <Input value={Real_name} onChange={(e) => {
                                setReal_name(e.target.value)
                            }} />
                        </Form.Item>
                        <Form.Item label="手机号">
                            <Input value={phone} onChange={(e) => {
                                setphone(e.target.value)
                            }} />
                        </Form.Item>
                        <Form.Item label="密码">
                            <Input value={password} onChange={(e) => {
                                setpassword(e.target.value)
                            }} />
                        </Form.Item>
                    </Form>

                </Modal>
            </div>
        </div>
    )
}
